<template>
  <div class="home">
    <van-nav-bar
  title="购物车"
 
  left-arrow
  bind:click-left="onClickLeft"
  bind:click-right="onClickRight"
/>
    <ul>
      <li v-for="(item) in cartList" :key="item.id">
        <van-checkbox v-model="item.checked" @change="changeCheck(item)"></van-checkbox>
        <van-image width="100px" height="100px" fit="fill" :src="item.image" />
        <div class="info">
          <p>{{item.name}}</p>
          <p style="color:#f00;">￥{{item.price}}</p>
        </div>
        <van-stepper theme="round" button-size="22" disable-input v-model="item.count" @change="changeStepper"/>
        <van-button type="danger" @click="shanchu(index)">删除</van-button>
      </li>
    </ul>
    <div class="check_all">
      <van-checkbox v-model="isCheckedAll" @change="checkAll"></van-checkbox><span>全选</span>
    </div>
    <div class="totals">
      <span>总价格:<span style="color:#f00;margin-right:20px;">￥{{totalsPrice}}</span></span>
      <van-button type="danger">去结算</van-button>
    </div>
  </div>
</template>

<script>

export default {
    data() {
      return {
        totalsPrice: 0,
        isCheckedAll: false,
        cartList: [{
          id: 1,
          image: '../assets/images/banner1.png',
          name: '荣耀V30',
          price: '2999',
          count: 1,
          checked: false
 
        }, {
          id: 2,
          image: '../assets/images/banner1.png',
          name: '荣耀30',
          price: '2999',
          count: 1,
          checked: false
        }, {
          id: 3,
          image: '../assets/images/banner1.png',
          name: '荣耀30pro',
          price: '3999',
          count: 1,
          checked: false
        }]
      }
    },
    methods: {
      //删除
      shanchu(index){
        console.log(index);
        alert("确定要删除吗")
        
        this.cartList.splice(index,1)
        
      },
      onClickLeft() {
      Toast('返回');
    },
    onClickRight() {
      Toast('按钮');
    },
      //单选按钮
      changeCheck() {
        this.computToallPrice();
      },
      //全选
      checkAll(e) {
        e ? this.cartList.forEach(item => {
          item.checked = true
          this.computToallPrice();
        }) : this.cartList.forEach(item => {
          item.checked = false
           this.totalsPrice = 0;
        })
      },
      //计算总结
      computToallPrice() {
        this.totalsPrice = 0;
        this.cartList.forEach(item => {
          if (item.checked) {
            this.totalsPrice =  this.totalsPrice + item.count * item.price;
          }
        })
      },
      //计数器
      changeStepper(e){
        this.computToallPrice();
      }
    },
    created() {
    }
  }
</script>
<style scoped lang="less">
  .home {
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    padding: 20px;
 
    ul li {
      margin-bottom: 30px;
      width: 100%;
      height: 150px;
 
      .van-checkbox {
        width: 30px;
        height: 30px;
        float: left;
        margin-top: 30px;
      }
    }
 
    .van-image {
      float: left;
      vertical-align: middle;
 
    }
 
    .info {
      width: 100px;
      float: left;
      margin-top: 20px;
 
      p {
        line-height: 30px;
      }
    }
 
    .van-stepper {
      float: left;
      margin-top: 50px;
    }
 
    .check_all {
      width: 150px;
      float: left;
 
      span {
        float: left;
      }
 
      .van-checkbox {
        width: 30px;
        height: 30px;
        float: left;
      }
    }
 
    .totals {
      float: right;
    }
  }
</style>

